<template>
  <!-- <div>hello</div> -->
  <!-- <div>{{title.x.y.z}}</div>
  <div>{{title.x.y.w}}</div> -->
  <!-- <div>{{count}}</div> -->
  <!-- <div>{{str.title}}</div> -->
  <!-- <div>{{count2}}</div> -->
  <!-- <div>{{plusOne}}</div> -->
  <!-- <div ref="child"></div> -->
  <Child ref="child"></Child>
</template>

<script lang="ts">
  import { h, ref, provide, watchEffect, watch, reactive, readonly, computed, onMounted, defineComponent, onUpdated } from 'vue'
  import Child from './Child'
  // import useCount from './useCount'
  // import useTitle from './useTitle'
  export default defineComponent({
    components: {
      Child
    },
    setup() {
      const count = ref(1)
      // const plusOne = computed({
      //   get: () => count.value + 1,
      //   set: (val) => {
      //     count.value = val - 1
      //   },
      // })

      // plusOne.value = 1
      // console.log(count.value) // 0
      // const str = ref('abc')
      // const count = ref(1)
      // const count2 = readonly(count)

      // onMounted(()=> {
      //   count.value = 100
      //   setTimeout(() => {
      //     str.value = 'def'
      //   }, 1000)
      // })

      // const stop = watchEffect(() => {
      //   console.log(count2.value)
      //   console.log(str.value)
      // })

      // stop()

      // watch(
      //   [count, count2],
      //   (newValue, oldValue) => {
      //     console.log(oldValue)
      //   }
      // )
      // let {count} = useCount()
      // let {str} = useTitle()

      // const key = Symbol()

      // provide('key', count)

      // onMounted(() => {
      //   count.value = 10000
      // })

      const child = ref(null)

      onMounted(() => {
        console.log(child.value.title)
      })

      return {
        // ...useCount(),
        // ...useTitle()
        child
      }
    },
  }) 
</script>